<template>
  <div class='u-selectOneToList'>
    <el-dialog
      :title="title"
      :visible.sync="dialogVisible"
      :before-close="close">
      <el-form :inline='true' label-width='120'>
        <el-form-item label='关键字：'>
          <el-input v-model.trim='keyword' type='text' />
        </el-form-item>
        <el-form-item>
          <el-button type='primary'>搜索</el-button>
        </el-form-item>
      </el-form>
      <a-table :data='data' :cols='tableKeys'>
        <el-table-column align="center" label="名称" min-width="80">
          <template slot-scope="scope">
            <div :class="selectIds.includes(scope.row.id) ? 'on' : ''">
              {{ scope.row.name || scope.row.short_name }}
            </div>
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作" min-width="80">
          <template slot-scope="scope">
            <div>
              <el-button size='mini' @click='choose(scope.row)'>{{ selectIds.includes(scope.row.id) ? '取消选择' : '选择' }}</el-button>
            </div>
          </template>
        </el-table-column>
      </a-table>
      <div class='u-pagination'>
        <!-- 分页 -->
        <pagination ref='page' @change='getData' :action='fetchData' :pageSize='20'></pagination>
      </div>
      <div class='u-selectOneToList-btn'>
        <!-- <el-button type='primary' @click='comfirm'>确定</el-button> -->
        <el-button type='primary' @click='close'>关闭窗口</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'u-selectOneToList',

  props: {
    title: {
      default: '标题'
    },
    listPath: {
      default: ''
    },
    isChooseOne: {
      default: false
    }
  },

  data() {
    return {
      tableKeys: [
      ],
      data: [],
      // 选择的对象数组
      selectObjs: [],
      selectIds: [],
      keyword: '',
      dialogVisible: false
    }
  },

  methods: {
    async fetchData(aPageNum, aPageSize) {
      return this.$api[this.listPath]({
        aPageNum,
        aPageSize,
        aFirmId: this.aFirmId
      })
    },

    getData(data) {
      this.data = data.map(v => ({
        ...v,
        id: v.staff_id || v.id
      }))
    },

    close() {
      this.dialogVisible = false
    },

    $show() {
      this.dialogVisible = true
      this.$nextTick(() => {
        this.$refs.page.changePage()
      })
    },

    choose(v) {
      const id = v.id
      if (this.isChooseOne) {
        // 只选一个
        this.selectObjs = [v]
        this.selectIds = [id]
      } else {
        // 判断是否含有
        if (!this.selectIds.includes(id)) {
          this.selectObjs.push(v)
          this.selectIds.push(id)
        } else {
          this.selectObjs = this.selectObjs.filter(v => v.id !== id)
          this.selectIds = this.selectIds.filter(v => v !== id)
        }
      }
      this.$emit('getData', this.selectObjs)
    },

    deleteObj(i) {
      this.selectObjs.splice(i, 1)
      this.selectIds.splice(i, 1)
      this.$emit('getData', this.selectObjs)
    },

    setData(data) {
      this.selectObjs = data.map(v => ({
        ...v,
        id: v.staff_id || v.id
      }))
      this.selectIds = this.selectObjs.map(v => v.id)
      this.$emit('getData', this.selectObjs)
    }
  }
}
</script>

<style lang='less'>
.u-selectOneToList {
  &-btn {
    width: 100%;
    display: flex;
    justify-content: flex-end;
  }
  .on {
    font-weight: bold;
  }
}
</style>